<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>围栏报警</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- baidu-map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <style>
  .fenceType{
      display: inline-block;
      background: #d6d6d6;
      width: 50px;
      height: 28px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
    }
    .ico_rectangle{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -2px;
      width: 50px;
      height: 28px;
    }
    .ico_polygon{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -31px;
      width: 50px;
      height: 28px;
    }
    .ico_circle{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -60px;
      width: 50px;
      height: 28px;
    }
    .ico_boundary{
      display: inline-block;
      background: url(../img/fence.png) no-repeat;
      background-size: 65%;
      background-position: center -120px;
      width: 50px;
      height: 28px;
    }
    .lushu-box-text{
      background-color: #f5f5f5;
      height: 30px;
      font-size: 14px;
      color: #999;
      line-height: 30px;
      border-radius: 4px;
      padding: 0px 10px;
      margin: 6px 6px 6px 0;
      cursor: pointer;
    }
    #map{
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <el-form ref="form" :model="form" label-width="88px" style="width: 900px">
      <el-row>
        <!-- <el-col :span="12">
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="form.datePicker"
              type="daterange"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col> -->
        <el-col :span="7">
          <el-form-item label="选择车辆：">
              <div class="lushu-box-text" @click="vehicleFocus">{{plateNo}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item label="选择围栏：">
              <el-select v-model="form.fenceId" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.circleName"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small" v-show="resourceMap.saveUserInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData.list" highlight-current-row border size="small" :max-height="windowHeight" style="width: 100%">
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="plateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="vin" label="车架号"></el-table-column>
      <el-table-column prop="alarmType" label="报警类型">
        <template slot-scope="scope">
            <span>{{scope.row == "1" ? "驶出围栏范围" : "驶入围栏范围"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="circleFenceEntity.circleName" label="围栏名称"></el-table-column>
      <el-table-column label="围栏类型">
        <template slot-scope="scope">
          <span class="fenceType"><i :class="'ico_'+scope.row.circleFenceEntity.fenceType"></i></span>
        </template>
      </el-table-column>
      <el-table-column prop="alarmTime" sortable label="报警时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="handleShowFence(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="form.pageSize"
      :total="tableData.totalCount"
      :current-page.sync="form.page"
      @current-change="handleCurrentChange">
    </el-pagination>
    <!----------------- dialog bindVehicle ---------------->
    <el-dialog title="选择车辆" :visible.sync="dialogVehicle"  width="40%">
        <el-table :data="vehicleData.list" border size="small"  @row-click="vehicleTableCurrentChange">
          <el-table-column type="index" ></el-table-column>      
          <el-table-column prop="plateNo" sortable label="车牌号"></el-table-column>
          <el-table-column prop="vinCode" sortable label="车架号"></el-table-column>
          <el-table-column prop="gmt_modified" sortable label="修改时间" show-overflow-tooltip></el-table-column>
        </el-table>
        <br>
        <el-pagination
          background
          @current-change="vehiclehandleCurrentChange"
          :current-page.sync="formVehicle.page"
          :page-size="formVehicle.pageSize"
          :total="vehicleData.totalElement">
        </el-pagination> 
      </el-dialog>
      <!----------------- dialog 显示地图围栏 ---------------->
      <el-dialog title="车辆位置" :visible.sync="dialogFence">
          <div id="map"></div>
      </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var flag = false,map=null;
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          dialogVehicle:false,
          dialogFence:false,
          vehicleData:[],//选择车辆数据
          formVehicle: {//选择车辆分页
            page:1,
            pageSize:15,
          },
          resourceMap:storageLocal.getName('user'),
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          tableData: [],
          form: {
              page:1,
              pageSize:20,
              vehicleId:null,
              plateNo:null,
              fenceId:null
          },
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 155,
          options:[]
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.getSelectLog()
          this.requestModel()
        })
      },
      computed:{
        plateNo:function(a,b){
          if(this.form.plateNo){
            return this.form.plateNo
          }else{
            return "点击选择车辆"
          }
        }
      },
      methods: {
          onSubmit:function() { 
            this.requestModel()
          },
          resetForm:function(){
            this.form.vehicleId = null
            this.form.plateNo = null
            this.form.fenceId = null
          },
          handleSizeChange:function(val) {
            this.pageSize = val;
            this.requestModel();
          },
          handleCurrentChange:function(val) {
            this.requestModel()
          },
          getSelectLog:function(){//获取操作类型下拉列表
            resourceRequst("/circleFence/queryCircleFence",{page:1,pageSize:50},function(res){
                vm.options = res.list
            },true)
          },
          requestModel:function(){
            var data = {
              vehicleId:this.form.vehicleId,
              fenceId:this.form.fenceId,
              page:this.form.page,
              pageSize:this.form.pageSize
              // startTime:this.form.datePicker?this.form.datePicker[0]:'',
              // endTime:this.form.datePicker?this.form.datePicker[1]:'',
            }
            resourceRequst("/alarm/queryFenceAlarmListByPage",data,function(res){
                vm.tableData = res
            })
          },
          // -------------选择车辆 dialog data-------------
          vehicleFocus:function(event){//车辆模态框 focus 事件
            this.vehicleRequestModel()
          },
          vehiclehandleCurrentChange:function(val) {//分页--发生变化
            this.vehicleRequestModel()
          },
          vehicleRequestModel:function(){//车辆 request
            var _this = this
            var data = {
              page:this.formVehicle.page - 1,
              pageSize:this.formVehicle.pageSize,
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
              _this.vehicleData = res.getResult
              _this.dialogVehicle = true
            })
          },
          vehicleTableCurrentChange(val) {
            console.log("------------触发CurrentChange",val)
            if(val && Object.keys(val).length){
              this.dialogVehicle = false
              this.form.vehicleId = val.id
              this.form.plateNo = val.plateNo
            }
          },
          // -------------地图查看围栏报警 dialog data-------------
          //绘制围栏图形
          handleShowFence:function(row){
            this.dialogFence = true
            if(map){map.clearOverlays()}
            setTimeout(function(){
              var wgs84togbd09 =  coordtransform.wgs84togbd09(row.lng,row.lat)
              var point = new BMap.Point(wgs84togbd09[0],wgs84togbd09[1]);
              map = new BMap.Map('map',{enableMapClick:false});
              map.centerAndZoom(point, 16);
              map.enableScrollWheelZoom(); 
              var myIcon = new BMap.Icon("../img/ico/car.png", new BMap.Size(35,17));
              var marker = new BMap.Marker(point,{icon:myIcon});
              map.addOverlay(marker);
              
              var data = JSON.parse(JSON.stringify(row.circleFenceEntity));
              if(data.fenceType == "circle"){
                var H = typeof data.pointList == "object" ? data.pointList:JSON.parse(data.pointList);
                var HP = coordtransform.wgs84togbd09(H.lng,H.lat)
                data.pointList = {
                  lng:HP[0],
                  lat:HP[1],
                }
              }else{
                var H = typeof data.pointList == "object" ? data.pointList:JSON.parse(data.pointList);
                data.pointList = _.map(H,function(item){
                  var HP = coordtransform.wgs84togbd09(item.lng,item.lat)
                  return new BMap.Point(HP[0], HP[1])
                })
              }
              
              var polygon = {};              
              if(data.fenceType == "circle"){//圆形
                var point = new BMap.Point(data.pointList.lng, data.pointList.lat);
                map.centerAndZoom(point,15);
                polygon = new BMap.Circle(data.pointList,data.radius, {
                    strokeColor: "#58ffff", 
                    fillColor: "#3d9dff", 
                    strokeWeight: 2, 
                    strokeOpacity: 0.5,
                    fillOpacity:0.2
                });
              }else{
                map.setViewport(data.pointList);  
                polygon = new BMap.Polygon(data.pointList, {
                    strokeColor: "#58ffff", 
                    fillColor: "#3d9dff", 
                    strokeWeight: 2, 
                    strokeOpacity: 0.5,
                    fillOpacity:0.2
                });  //创建多边形
              }
              map.addOverlay(polygon);
            },300)
          },
      }
    })
  </script>
</html>